<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS实现QQ页面式导航</title>
<style type="text/css">
  .titleStyle{background-color: green;color: #ffffff;}
  .contentStyle{background-color: #ffffff;}
</style>
<script language="JavaScript">

var layerTop=20;       //菜单顶边距
var layerLeft=30;      //菜单左边距
var layerWidth=140;    //菜单总宽
var titleHeight=30;    //标题栏高度
var contentHeight=200; //内容区高度
var stepNo=10;         //移动步数，数值越大移动越慢

var itemNum=0;runtimes=0;
document.write('<div id="itemsLayer" style="position:absolute;overflow:hidden;border:1px solid #008800;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');

function addItem(itemTitle,itemContent){
  var itemHTML = "";
  itemHTML += '<div id=item'+itemNum+' itemIndex='+itemNum+' style="position:relative;left:0;top:'+(-contentHeight*itemNum)+';width:'+layerWidth+';">';
  itemHTML += '<table width=100% cellspacing="0" cellpadding="0">';
  itemHTML += '<tr><td height='+titleHeight+' onclick=changeItem('+itemNum+') class="titleStyle" align=center>'+itemTitle+'</td></tr>';
  itemHTML +=  '<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr>';
  itemHTML += '</table></div>';
  document.write(itemHTML);
  itemNum++;
}
//添加菜单标题和内容，可任意多项，注意格式：
addItem('导航菜单','<center>仿QQ导航菜单</center>');
addItem('我的设备','<center><a href="#">我的Android手机</a> <BR><BR><a href="#">发现新设备</a> <BR></center>');
addItem('大学同学','<center><a href="#">张** </a> <BR><BR><a href="#">王** </a> <BR><BR><a href="#">李**</a> <BR><BR><a href="#">更多..</a></center>');
addItem('高中同学','<center><a href="#">张** </a> <BR><BR><a href="#">王** </a> <BR><BR><a href="#">李**</a> <BR><BR><a href="#">更多..</a></center>');
addItem('初中同学','<center><a href="#">张** </a> <BR><BR><a href="#">王** </a> <BR><BR><a href="#">李**</a> <BR><BR><a href="#">更多..</a></center>');
addItem('小学同学','<center><a href="#">张** </a> <BR><BR><a href="#">王** </a> <BR><BR><a href="#">李**</a> <BR><BR><a href="#">更多..</a></center>');

document.write('</div>');
var totalHeight = itemNum*titleHeight+contentHeight;
document.all.itemsLayer.style.height=totalHeight;

var toItemIndex=itemNum-1;
var onItemIndex=itemNum-1;

function changeItem(clickItemIndex){
  toItemIndex=clickItemIndex;
  console.log('changeItemStart----------toItemIndex='+toItemIndex+'---onItemIndex='+onItemIndex);
  if(toItemIndex-onItemIndex>0){
    moveUp(); 
  }else{
    moveDown();
  } 
  runtimes++;
  if(runtimes>=stepNo){
    onItemIndex=toItemIndex;
    runtimes=0;
  }else{
    setTimeout("changeItem(toItemIndex)",10);
  }
   console.log('changeItemEnd------------toItemIndex='+toItemIndex+'---onItemIndex='+onItemIndex);
}

function moveUp(){
  console.log('moveUp-------------toItemIndex='+toItemIndex+'---onItemIndex='+onItemIndex);
  for(i=onItemIndex+1;i<=toItemIndex;i++){
    eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
  }
}

function moveDown(){
  console.log('moveDown-------------toItemIndex='+toItemIndex+'---onItemIndex='+onItemIndex);
  for(i=onItemIndex;i>toItemIndex;i--){
    eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
  }
}
changeItem(0);

</script>
</head>
<body>

</body>
</html>